import React, { Component } from 'react'
import { Input,Button,List} from 'antd';
export default class TodoListUI extends Component {
 
    render() {
        return (
            <div style={{margin:"10px"}}> 
                 <div>
                     <Input placeholder="todo info..."
                      value={this.props.inputValue} 
                      style={{width:"300px",marginRight:"10px"}}
                      onChange= {this.props.handleChange} />
                     <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
                 </div>
                 <List 
                  style={{marginTop:"10px",width:"300px"}}
                  bordered  
                  dataSource={this.props.list}
                    renderItem={(item,index) => (
                            <List.Item onClick={this.handleItemDelete.bind(this,index)}
                        >{item}</List.Item>

                    )}
                 /> 
            </div>  
         )
    }

    handleItemDelete(index){ 
        this.props.handleItemDelete(index)
    }
}
